
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <home></home>
    <hr>
    <news></news>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  const CommonTitle = {
    template: `
      <div>
        title组件
        <h2>
          {{ title }}
          {{ subTitle }}
        </h2>
      </div>    
    `,
    props: ['title','subTitle']
  }
  const Home = {
    template: `
      <div>
        home组件
        <common-title title='我是home':subTitle='msg'></common-title>
      </div>  
    `,
    data(){
      return{
        msg: '我是home的二级标题'
      }
    },
    components: {
      CommonTitle
    }
  }
  Vue.component('Home', Home)
  const News = {
    template: `
      <div>
        news组件
        <common-title title="我是news" subTitle='我是news的二级标题'></common-title>
      </div>  
     `,
     components: {
       CommonTitle
     }
  }
  Vue.component('News', News);
  const vm = new Vue({
    el: '#app'
  })
</script>
</html>